<template>
    <van-row>
        <van-list
            v-model="listloading"
            :finished="finished"
            finished-text="没有更多了" :offset="10"
            @load="onLoad"
        >
            <div class="goot-list">
                <div class="good-item" v-for="(item,index) in ListArr" :key="index" @click="JumpDetails(item.goods_id)">
                    <span class="good-item-title">{{item.brand}}</span>
                    <div class="good-item-img" :style="{background:`url(${item.image})`}"></div>
                    <span class="good-name">{{item.series}}</span>
                    <span class="good-admin-pay">官方售价:<span class="good-admin-pay-item"><img class="" src="../assets/img/payblack.png" alt="">{{item.market_price}}</span></span>
                    <span class="good-go-pay">GO价: <span class="good-go-pay-item"><img class="" src="../assets/img/payred.png" alt="">{{item.price}}</span></span>
                </div>
            </div>
        </van-list>
    </van-row>
</template>
<script>
export default {
    props:['ListArr'],
    data(){
        return{
            listloading:false,
            finished:false,
        }
    },
    methods:{
        onLoad(){
            let _this=this
            _this.listloading=false
            setTimeout(() => {
                _this.$emit('loadgoods')
                _this.listloading=true
            }, 2000);
            console.log("onload")
        },
        JumpDetails(id){
            _this.$emit('ToDetails',id)
        }
    }
}
</script>
<style scoped>
.goot-list{
    width: 360px;
    margin:26px auto 0 auto;
}
.good-item{
    width: 176px;
    height: 240px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 13px 0;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}
.good-item:nth-child(2n){
    float: right;
    margin: 0 0 13px 0;
}
.good-item>img{
    width: 100%;
}
.good-item-img{
    width: 120px;
    height: 70px;
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-position-y: bottom !important;
    background-size: 90px 60px !important;
    margin: 12px auto 13px auto;
}
.good-item-title{
    display: block;
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 18px;
    font-family: 'PingFang Medium';
    margin-top: 28px;
}
.good-name{
    display: block;
    text-align: center;
    color: #999;
    font-size: 10px;
    font-family: 'DINPro Medium';
}
.good-admin-pay{
    display: block;
    text-align: center;
    color: #999;
    font-size: 11px;
    font-family: 'PingFang Medium';
}
.good-admin-pay-item{
    display: inline-block;
    color: #999;
    font-size: 11px;
    font-family: 'DINPro Medium';
}
.good-admin-pay-item > img{
    width:7px ;
    margin: 0 3px 3px 3px;
}
.good-go-pay{
    display: block;
    text-align: center;
    font-size: 13px;
    color: #333333;
    font-family: 'PingFang Medium';
    margin-top: 3px;
}
.good-go-pay-item{
    display: inline-block;
    font-size: 13px;
    color: #fb1f36;
    font-family: 'DINPro-Bold';
    margin-top: 4px;
}
.good-go-pay-item>img{
    width: 7px;
    margin: 0 3px 3px 3px;
}
</style>